<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.global.js"></script>
</head>

<body>
    <!-- 作业：结合模板引用和自定义指令，实现表单的验证和错误样式的展示（标记红色，错误信息提示）,
    再思考，怎么方便去获取表单的数据 -->

    <input type="text" placeholder="ID" ref="id">
    <div v-html="errID"></div>
    <input type="password" placeholder="password" ref="pwd">
    <div v-html="errpwd"></div>
    <input type="submit" @click="get">
    <!-- <button @click="get">确定</button> -->
</body>
<script>
    Vue.createApp({
        mounted: function () {

        },
        data: function () {
            return {
                ID: "test",
                password: "12345",
                errID: "",
                errpwd: "",
            }
        },
        methods: {
            get() {
                //console.log(this.$refs.id)
                let id = this.$refs.id.value
                let pwd = this.$refs.pwd.value

                if (id == "") {
                    this.errID = "<span style='color:red;font-size:10px'>* ID 不能为空!!</span>"
                } else if (id != this.ID) {
                    this.errID = "<span style='color:red;font-size:10px'>* ID 错误!!</span>"
                } else {
                    this.errID = "<span style='color:red;font-size:10px' hidden>* ID 正确!!</span>"
                }

                if (pwd == "") {
                    this.errpwd = "<span style='color:red;font-size:10px'>* password 不能为空!!</span>"
                } else if (pwd != this.password) {
                    this.errpwd = "<span style='color:red;font-size:10px'>* password 错误!!</span>"
                } else {
                    this.errpwd = "<span style='color:red;font-size:10px' hidden>* password 正确!!</span>"
                }

                if (id == this.ID && pwd == this.password) {
                    alert("成功！！")
                }
            }
        }
    }).mount("body")
</script>

</html>